<template>
	<view class="wapper">

		<view class="form-con" v-if="fixType===1">
			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>实际维修人(可多选)
				</view>
				<view class="value" @click="showUser=true">
					<text :class="form.fixByName?'text':''">
						{{form.fixByName || '请选择'}}
					</text>
					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>
					实际维修时间
				</view>
				<view class="value" @click="showTimePicker">

					<text class="text" v-if="form.actualTime.length>0">
						{{form.actualTime[0]}}~{{form.actualTime[1]}}
					</text>
					<text v-else>请选择</text>

					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view>
			</view>
			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>实际维修项目
				</view>
			</view>
			<view class="table">
				<view class="pro-header">
					<view class="head-index">
						序号
					</view>
					<view class="head-four">
						维修项目
					</view>
					<view class="head-three">
						操作
					</view>
				</view>
				<template v-if="form.detailList && form.detailList.length>0">
					<view class="pro-list" v-for="(item,index) in form.detailList" :key="index">
						<view class="list-index">{{index+1}}</view>
						<view class="list-four" @click="showFixCom(index)">
							<text class="grey" v-if="!item.fixProjectName">
								请选择
							</text>
							<text v-else>
								{{item.fixProjectName}}
							</text>

						</view>

						<view class="list-three">
							<u-icon name="minus-circle-fill" color="#ff654e" size="36rpx"
								@click="handleDeleteDetailList(index,'detail')">
							</u-icon>
						</view>

						<view class="clear"></view>

					</view>

				</template>
				<view class="clear"></view>
				<view class="add-table" @click="addDetailList">
					<u-icon name="plus-circle" color="#3685E6" size="36rpx"></u-icon>添加
				</view>
			</view>


			<view class="item-list-none">
				<view class="name">
					<text class="red">
						*
					</text>
					维修情况
				</view>
			</view>
			<view class="text-area">
				<textarea maxlength="500" v-model="form.fixResult" placeholder="请输入"></textarea>
			</view>
		</view>


		<view class="form-con" v-if="fixType===2">

			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>
					实际维修时间
				</view>
				<view class="value" @click="showTimePicker">

					<text class="text" v-if="form.actualTime.length>0">
						{{form.actualTime[0]}}~{{form.actualTime[1]}}
					</text>
					<text v-else>请选择</text>

					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view>
			</view>

			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text> 维修厂家及费用
				</view>
				<!-- 	<view class="value" @click="showFactory=true">
					<text :class="form.factoryName?'text':''">
						{{form.factoryName || '请选择'}}
					</text>
					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view> -->
			</view>

			<view class="table">
				<view class="pro-header">
					<view class="head-index">
						序号
					</view>
					<view class="head-one">
						维修厂家
					</view>
					<view class="head-two">
						维修费用
					</view>
					<view class="head-three">
						操作
					</view>
				</view>
				<template v-if="form.factoryList && form.factoryList.length>0">
					<view class="pro-list" v-for="(item,index) in form.factoryList" :key="index">
						<view class="list-index">{{index+1}}</view>
						<view class="list-one" @click="showFactoryCom(index)">
							<text class="grey" v-if="!item.factoryName">
								请选择
							</text>
							<text v-else>
								{{item.factoryName}}
							</text>

						</view>
						<view class="list-two">
							<input type="number" placeholder="请输入" border="surround" v-model="item.fixFeeAmount"
								@blur="onExchangeFactoryList(index, item)" />
							元
						</view>
						<view class="list-three">
							<u-icon name="minus-circle-fill" color="#ff654e" size="36rpx"
								@click="handleFactoryListList(index,'factory')">
							</u-icon>
						</view>

						<view class="clear"></view>

					</view>

				</template>
				<view class="clear"></view>
				<view class="add-table" @click="addFactoryList">
					<u-icon name="plus-circle" color="#3685E6" size="36rpx"></u-icon>
					添加
				</view>
			</view>



			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>
					实际维修项目
				</view>
				<view class="value" :class="form.fixFeeAmount>0?'text':''">

					总费用： {{form.fixFeeAmount}}
					元



				</view>
			</view>
			<view class="table">

				<view class="pro-header">
					<view class="head-index">
						序号
					</view>
					<view class="head-one">
						维修项目
					</view>
					<view class="head-two">
						维修费用
					</view>
					<view class="head-three">
						操作
					</view>
				</view>
				<template v-if="form.detailList && form.detailList.length>0">
					<view class="pro-list" v-for="(item,index) in form.detailList" :key="index">
						<view class="list-index">{{index+1}}</view>
						<view class="list-one" @click="showFixCom(index)">
							<text class="grey" v-if="!item.fixProjectName">
								请选择
							</text>
							<text v-else>
								{{item.fixProjectName}}
							</text>

						</view>
						<view class="list-two">
							<input type="number" placeholder="请输入" border="surround" v-model="item.fixFeeAmount"
								@blur="onExchange(index, item)" />
							元
						</view>
						<view class="list-three">
							<u-icon name="minus-circle-fill" color="#ff654e" size="36rpx"
								@click="handleDeleteDetailList(index,'detail')">
							</u-icon>
						</view>

						<view class="clear"></view>

					</view>

				</template>
				<view class="clear"></view>
				<view class="add-table" @click="addDetailList">
					<u-icon name="plus-circle" color="#3685E6" size="36rpx"></u-icon>添加
				</view>
			</view>


			<view class="item-list-none">
				<view class="name">
					<text class="red">
						*
					</text>
					维修情况
				</view>
			</view>
			<view class="text-area">
				<textarea maxlength="500" v-model="form.fixResult" placeholder="请输入"></textarea>
			</view>
		</view>



		<view class="footer" @click="newSubmit">
			提交
		</view>

		<term-picker :visable.sync="timeShow" :minYear="1900" :timeLimit="false" :deferYear="30" themeColor="#407FFF"
			startText="开始时间" endText="结束时间" @confirm="confirm">
		</term-picker>
		<changeMoreUser @closeUser="closeUser" :checkboxValue="form.fixBy" :userList="userList" title="选择实际维修人"
			@changeItem="changeItem" :showUser="showUser"></changeMoreUser>
		<changeFactory @closeFactory="closeFactory" @changeFactoryItem="changeFactoryItem" :showFactory="showFactory">
		</changeFactory>
		<changeFixProject @closeFix="closeFix" @closeModal="closeModal" @changeFixItem="changeFixItem" :single="true"
			:showFixPro="showFixPro">
		</changeFixProject>
		<u-modal :show="showConfirm" @cancel="showConfirm=false" @confirm="submitDetail" :showCancelButton="true"
			title="提示" content='是否确认删除?'></u-modal>
	</view>
</template>

<script>
	import termPicker from '@/components/term-picker/term-picker.vue'
	import changeMoreUser from '@/components/changeMoreUser/index.vue'
	import changeFactory from '@/components/changeFactory/index.vue'
	import changeFixProject from '@/components/changeFixProject/index.vue'
	import {
		setFixResult,
		getWorkOrderDetail

	}
	from '@/api/repair.js'
	import {
		getUserList
	} from '@/api/common.js'

	export default {
		components: {
			termPicker,
			changeMoreUser,
			changeFactory,
			changeFixProject
		},
		data() {
			return {
				timeShow: false,
				showUser: false,
				showFactory: false,
				fixType: '',
				detailInfo: {},
				// 表单参数
				form: {
					id: null,
					fixResult: '',
					actualStartTime: '',
					actualEndTime: '',
					actualTime: [],
					fixBy: [],
					// factoryId: '',
					fixByName: '',
					factoryName: '',
					fixFeeAmount: 0,
					detailList: [],
					factoryList: []
				},
				params: {
					year: true,
					month: true,
					day: true
				},
				showConfirm: false,
				deleteDetailIndex: null,
				deleteFactoryIndex: null,
				showFixPro: false,
				currentDetailIndex: null,
				currentFactoryIndex: null,
				deleteFlag: '',
				userList: []

			}
		},
		created() {

		},
		onLoad(option) {
			this.form.id = option.id || ''
			this.fixType = Number(option.fixType) || ''
			// if (this.fixType === 2) {
			this.getDetail()
			// }
			this.getUsers()

		},
		methods: {
			getUsers() {
				getUserList({
					deptId: 20
				}).then(response => {
					const {
						rows
					} = response
					this.userList = rows || []
				})

			},
			// 添加
			addFactoryList() {
				this.form.factoryList.push({
					flag: 'add',
					factoryName: '',
					factoryId: '',
					fixFeeAmount:''
				})
			},
			handleFactoryListList(index, flag) {
				if (this.form.factoryList.length === 1) {
					uni.showToast({
						icon: 'none',
						title: '至少保留一条数据',
						duration: 3000,
					})
					return
				}
				this.deleteFactoryIndex = index
				this.showConfirm = true
				this.deleteFlag = flag
			},
			// 添加
			addDetailList() {
				this.form.detailList.push({
					flag: 'add',
					fixProjectName: '',
					fixProjectId: '',
					fixFeeAmount:''
				})
			},
			handleDeleteDetailList(index, flag) {
				if (this.form.detailList.length === 1) {
					uni.showToast({
						icon: 'none',
						title: '至少保留一条数据',
						duration: 3000,
					})
					return
				}
				this.deleteDetailIndex = index
				this.showConfirm = true
				this.deleteFlag = flag

			},
			showFixCom(index) {
				this.currentDetailIndex = index
				this.showFixPro = true
			},
			showFactoryCom(index) {
				this.currentFactoryIndex = index
				this.showFactory = true
			},
			changeFixItem(item) {
				this.form.detailList[this.currentDetailIndex].fixProjectName = item.fixProjectName
				this.form.detailList[this.currentDetailIndex].fixProjectId = item.id
				this.showFixPro = false
			},
			closeFix() {
				this.showFixPro = false
			},
			closeModal() {
				this.showFixPro = false
			},
			submitDetail() {
				this.showConfirm = false
				if (this.deleteFlag === 'detail') {
					this.form.detailList.splice(this.deleteDetailIndex, 1)
					if (this.fixType === 2 && this.form.detailList.length > 0) {
						let sum = 0
						this.form.detailList.forEach((item) => {
							if (item.fixFeeAmount) {
								sum += Number(item.fixFeeAmount)
							}
						})
						this.form.fixFeeAmount = sum.toFixed(2)
					} else {
						this.form.fixFeeAmount = 0
					}
				} else {
					this.form.factoryList.splice(this.deleteFactoryIndex, 1)
				}

			},
			getDetail() {
				const id = this.form.id
				getWorkOrderDetail({
					id
				}).then(response => {
					const detailInfo = response.data
					this.form.detailList = detailInfo?.detailList || []
				})
			},
			onExchangeFactoryList(index, row) {
				let moment = this.form.factoryList[index] // 此处的mapActionList为自己的table表格绑定的data数组
				this.$set(this.form.factoryList, index, moment)
				const reg = /^[0-9][0-9]*([\.][0-9]{1,2})?$/
				if (!row.fixFeeAmount) {
					return
				}
				if (!reg.test(row.fixFeeAmount)) {
					uni.showToast({
						icon: 'none',
						title: '请输入数字且保留2位小数',
						duration: 3000,
					})
					row.fixFeeAmount = ''
					return
				}
			},
			onExchange(index, row) {
				let moment = this.form.detailList[index] // 此处的mapActionList为自己的table表格绑定的data数组
				this.$set(this.form.detailList, index, moment)
				const reg = /^[0-9][0-9]*([\.][0-9]{1,2})?$/
				if (!row.fixFeeAmount) {
					return
				}
				if (!reg.test(row.fixFeeAmount)) {
					uni.showToast({
						icon: 'none',
						title: '请输入数字且保留2位小数',
						duration: 3000,
					})
					row.fixFeeAmount = ''
					return
				} else {
					let sum = 0
					this.form.detailList.forEach((item) => {
						if (item.fixFeeAmount) {
							sum += Number(item.fixFeeAmount)
						}
					})
					this.form.fixFeeAmount = sum.toFixed(2)
				}

			},
			closeUser() {
				this.showUser = false
			},
			changeItem(nickNames, userIds) {
				this.form.fixBy = userIds
				this.form.fixByName = nickNames
				this.showUser = false
			},
			changeFactoryItem(item) {
				this.form.factoryList[this.currentFactoryIndex].factoryName = item.factoryName
				this.form.factoryList[this.currentFactoryIndex].factoryId = item.id
				// this.form.factoryId = item.id
				// this.form.factoryName = item.factoryName
				this.showFactory = false
			},
			closeFactory() {
				this.showFactory = false
			},
			showTimePicker() {
				this.timeShow = true
			},
			confirm(date) {
				this.form.actualTime = date
				this.form.actualStartTime = date[0]
				this.form.actualEndTime = date[1]

				console.log(date) // ['2021-06-01', '2021-07-01']
			},


			/** 提交按钮 */
			newSubmit() {
				let param = {

				}
				if (this.fixType === 1) {
					if (!this.form.fixBy) {
						uni.showToast({
							icon: 'none',
							title: '请选择实际维修人',
							duration: 3000,
						})
						return
					}
					if (!this.form.actualTime) {
						uni.showToast({
							icon: 'none',
							title: '请选择实际维修时间',
							duration: 3000,
						})
						return
					}
					if (!this.form.fixResult) {
						uni.showToast({
							icon: 'none',
							title: '请填写维修情况',
							duration: 3000,
						})
						return
					}
					if (this.form.detailList.length === 0) {
						uni.showToast({
							icon: 'none',
							title: '请填写维修项目',
							duration: 3000,
						})
						return

					} else {
						for (let i = 0; i < this.form.detailList.length; i++) {
							if (this.form.detailList[i].fixProjectId === '') {
								uni.showToast({
									icon: 'none',
									title: '请选择维修项目',
									duration: 3000,
								})
								return
							}

						}

					}
					param = {
						fixBy: this.form.fixBy,
						fixResult: this.form.fixResult,
						actualStartTime: this.form.actualStartTime,
						actualEndTime: this.form.actualEndTime,
						id: this.form.id,
						detailList: this.form.detailList
					}
				}
				if (this.fixType === 2) {
					if (this.form.factoryList.length === 0) {
						uni.showToast({
							icon: 'none',
							title: '维修厂家及费用至少添加一条',
							duration: 3000,
						})
						return
					}
					// if (!this.form.factoryId) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '请选择实际厂家',
					// 		duration: 3000,
					// 	})
					// 	return
					// }
					if (!this.form.actualTime) {
						uni.showToast({
							icon: 'none',
							title: '请选择实际维修时间',
							duration: 3000,
						})
						return
					}
					if (this.form.detailList.length === 0) {
						uni.showToast({
							icon: 'none',
							title: '请填写维修项目',
							duration: 3000,
						})
						return

					} else {
						let forData = [];
						for (let i = 0; i < this.form.detailList.length; i++) {
							if (this.form.detailList[i].fixProjectId === '') {
								uni.showToast({
									icon: 'none',
									title: '请选择维修项目',
									duration: 3000,
								})
								return
							}
							
							if (!this.form.detailList[i].fixFeeAmount) {
								uni.showToast({
									icon: 'none',
									title: '维修费用不能为空',
									duration: 3000,
								})
								return
							}
							if (!forData.some(e => e.fixProjectId == this.form.detailList[i].fixProjectId)) forData.push(
								this.form.detailList[i]);
						}
						if (forData.length !== this.form.detailList.length) {
							uni.showToast({
								icon: 'none',
								title: '实际维修项目不能重复',
								duration: 3000,
							})
							return
						}
					}
					if (!this.form.fixResult) {
						uni.showToast({
							icon: 'none',
							title: '请填写维修情况',
							duration: 3000,
						})
						return
					}

					let sum = 0
					let factoryForData = [];
					for (let j = 0; j < this.form.factoryList.length; j++) {
						if (this.form.factoryList[j].factoryId === '') {
							uni.showToast({
								icon: 'none',
								title: '维修厂家不能为空',
								duration: 3000,
							})
							return
						}
						if (this.form.factoryList[j].fixFeeAmount === '') {
							uni.showToast({
								icon: 'none',
								title: '厂家维修费用不能为空',
								duration: 3000,
							})
							return
						}
						sum += Number(this.form.factoryList[j].fixFeeAmount)
						if (!factoryForData.some(e => e.factoryId == this.form.factoryList[j].factoryId)) factoryForData
							.push(this.form.factoryList[j]);

					}
					console.log(this.form.fixFeeAmount, 'this.form.fixFeeAmount')
					if (factoryForData.length !== this.form.factoryList.length) {
						uni.showToast({
							icon: 'none',
							title: '维修厂家名称不能重复',
							duration: 3000,
						})
						return
					}
					if (Number(sum.toFixed(2)) !== Number(this.form.fixFeeAmount)) {
						uni.showToast({
							icon: 'none',
							title: '维修工厂及费用之和不等于实际维修项目总费用',
							duration: 3000,
						})
						return
					}

					param = {
						// factoryId: this.form.factoryId,
						factoryList: this.form.factoryList,
						fixResult: this.form.fixResult,
						actualStartTime: this.form.actualStartTime,
						actualEndTime: this.form.actualEndTime,
						id: this.form.id,
						detailList: this.form.detailList,
						fixFeeAmount: this.form.fixFeeAmount
					}
				}
				uni.showLoading({
					mask: true,
					title: '加载中',
				})
				setFixResult(param).then(response => {
					uni.showToast({
						icon: 'none',
						title: '保存成功',
						mask: true,
						duration: 3000,
					})
					setTimeout(() => {
						uni.hideLoading()
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				}).finally(() => {})

			},


		}
	}
</script>

<style lang="scss" scoped>
	.wapper {
		width: 100vw;
		min-height: 100vh;
		background: #F5F7F9;
		overflow: hidden;

		// padding-bottom: 104rpx;
		.clear {
			clear: both;
		}


		.form-con {
			margin-top: 10rpx;
			background: #fff;
			height: calc(100vh - 300 rpx);

			.table {
				background: #fff;
				padding: 30rpx;

				.pro-header {
					// background: #F5F7FA;
					border-radius: 3rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #8C99A7;

					.head-index {
						width: 110rpx;
						text-align: center;
						float: left;
					}

					.head-one {
						width: 294rpx;
						float: left;
					}

					.head-two {
						width: calc(100% - 504rpx);
						float: left;
					}

					.head-three {
						width: 100rpx;
						float: left;
						text-align: center;
					}

					.head-four {
						width: calc(100% - 214rpx);
						float: left;
					}


				}

				.pro-list {
					padding: 24rpx 0;
					font-size: 22rpx;
					font-weight: 400;
					color: #303133;
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #E3E7EE;

					.list-index {
						width: 110rpx;
						text-align: center;
						float: left;
					}

					.list-one {
						width: 294rpx;
						float: left;
						padding-right: 20rpx;
						box-sizing: content-box;

						.grey {
							color: #8C99A7;
						}
					}

					.list-two {
						width: calc(100% - 504rpx);
						float: left;
						display: flex;
						align-items: center;
						padding-right: 20rpx;
						box-sizing: border-box;

						input {
							font-size: 22rpx;
							padding: 12rpx 0 !important;
							width: 80rpx !important;
						}

						/deep/ .uni-input-input,
						/deep/ .input-placeholder {
							font-size: 22rpx;
						}

						/deep/ .u-input {
							padding: 12rpx 0 !important;
							width: 80rpx !important;
						}
					}

					.list-three {
						width: 100rpx;
						float: left;
						display: flex;
						justify-content: center;
					}

					.list-four {
						width: calc(100% - 214rpx);
						float: left;

						.grey {
							color: #8C99A7;
						}

					}

					// &:nth-of-type(even) {
					// 	background: #F5F7FA;
					// }
				}

			}


			.item-list-none {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;

				.name {
					font-size: 32rpx;
					font-weight: 400;

					.red {
						color: #FF654E;
					}
				}

			}

			.table {
				padding: 0 30rpx;
				border-bottom: 2rpx solid #e3e7ee;

				.add-table {
					height: 90rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #3685E6;

					.u-icon {
						margin: 0 16rpx;
					}

				}

				.list-list {
					width: 100%;

					.list-item {
						padding: 10rpx 0;
						min-height: 60rpx;
						line-height: 60rpx;
						border-bottom: 1rpx solid #E3E7EE;

						.item-index {
							width: 100rpx;
							float: left;
							text-align: center;

						}

						.item-name,
						.item-content {
							float: left;
							width: calc(50% - 90rpx);
							height: auto;

						}

						.item-handle {
							float: left;
							text-align: center;
							width: 80rpx;
							display: flex;
							justify-content: center;
							line-height: 80rpx;
							height: auto;

						}

						&:first-child {
							border-bottom: none !important;
							border-top: 1rpx solid #E3E7EE;
						}
					}


				}

			}

			.add-project {
				clear: both;
				padding: 26rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #3685E6;
				border-bottom: 2rpx solid #F5F7F9;

				image {
					width: 48rpx;
					height: 49rpx;
				}
			}

			.text-area {
				margin: 0 30rpx;

				textarea {
					width: 100%;
				}
			}

			.item-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 2rpx solid #E3E7EE;

				.name {
					font-size: 32rpx;
					font-weight: 400;
					margin-right: 20rpx;

					.red {
						color: #FF654E;
					}
				}

				.value {
					font-size: 24rpx;
					font-weight: 400;
					display: flex;
					color: #b3b3b3;
					flex: 1;

					width: 360rpx;
					justify-content: flex-end;


					text {
						margin-right: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.text {
						color: #333;
					}
				}

				.text {
					color: #333;
				}
			}
		}

		.footer {
			width: 686rpx;
			height: 104rpx;
			background: #407FFF;
			border-radius: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// position: fixed;
			// bottom: 118rpx;
			// left: 38rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin: 38rpx auto;

		}
	}
</style>
